<template>
  <a-drawer
    title="新增部门"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="userAddVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">

    <a-tabs defaultActiveKey="2" size="small">
      <a-tab-pane key="1">
      <span slot="tab">
        <a-icon type="android"/>
        部门信息
      </span>
        <a-form :form="form">
          <a-form-item label='部门名称' v-bind="formItemLayout">
            <a-input v-decorator="[
        'orgName',
        { rules: [{ required: true, message: '请输入角色名称!' }] }
        ]"/>
          </a-form-item>
          <a-form-item label="上级组织" v-bind="formItemLayout">
            <a-select  v-decorator="[
              'parentOrgId'
              ]">
              <a-select-option v-for="orgInfo in orgInfoData" :key="orgInfo.orgId">
                {{orgInfo.orgName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="备注信息" v-bind="formItemLayout">
            <a-input  v-decorator="['orgDescription']"/>
          </a-form-item>

        </a-form>
      </a-tab-pane>

      <a-tab-pane key="2">
      <span slot="tab">
        <a-icon type="android"/>
        绑定账户
      </span>
        <a-transfer
          style="margin: 0 auto"
          :dataSource="mockData"
          :listStyle="{
            width: '45%',
            height: '500px',
          }"
          showSearch
          :filterOption="filterOption"
          :targetKeys="targetKeys"
          @change="handleChange"
          @search="handleSearch"
          :render="item=>item.title"
        >
        </a-transfer>
      </a-tab-pane>

    </a-tabs>

      <div class="drawer-bootom-button">
        <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
          <a-button style="margin-right: .8rem">取消</a-button>
        </a-popconfirm>
        <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
      </div>
  </a-drawer>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}
export default {
  name: 'UserAdd',
  props: {
    userAddVisiable: {
      default: false
    }
  },
  data () {
    return {
      user: {
        accountCode: '',
        accountPwd: '',
        accountName: '',
        expireDate: '',
        accountStatus: '',
        defaultApp: ''
      },
      dateFormat: 'YYYY/MM/DD',
      loading: false,
      roleData: [],
      deptTreeData: [],
      mockData: [],
      targetKeys: [],
      appInfoData: [],
      roleInfoData: [],
      roleKeys: [],
      menuInfoData: [],
      orgInfoData: [],
      accountInfo: [],
      menuKeys: [],
      formItemLayout,
      defaultPassword: '1234qwer',
      form: this.$form.createForm(this),
      validateStatus: '',
      help: ''
    }
  },
  mounted() {
    //this.getMock();
    //this.getAppInfo();
    //this.getRoleInfo();
    //this.getMenuInfo();
    this.getOrgInfo();
    this.getAccountInfo();
  },
  methods: {
    reset () {
      this.loading = false
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    handleSubmit () {

      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          this.$post('/power/org-info/OrgInfoAdd', {
            accountId: this.targetKeys.join(','),...values
          }).then((r) => {
            this.getOrgInfo();
            this.getAccountInfo();
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })

        }
      })
    },
    handleUserNameBlur () {
      let username = this.user.username.trim()
      if (username.length) {
        if (username.length > 10) {
          this.validateStatus = 'error'
          this.help = '用户名不能超过10个字符'
        } else if (username.length < 4) {
          this.validateStatus = 'error'
          this.help = '用户名不能少于4个字符'
        } else {
          this.validateStatus = 'validating'
          this.$get(`user/check/${username}`).then((r) => {
            if (r.data) {
              this.validateStatus = 'success'
              this.help = ''
            } else {
              this.validateStatus = 'error'
              this.help = '抱歉，该用户名已存在'
            }
          })
        }
      } else {
        this.validateStatus = 'error'
        this.help = '用户名不能为空'
      }
    },
    getAccountInfo() {
      const targetKeys = [];
      const mockData = [];
      this.$get('/power/account-info/list').then((r) => {
        r.data.data.forEach(account => {
          const data = {
            key: account.accountId.toString(),
            title: account.accountName.toString(),
            description: account.accountName,
            chosen: false,
          };
          if (data.chosen) {
            targetKeys.push(data.key);
          }
          mockData.push(data);
        })
        this.accountInfo = r.data.data;
      })
      this.mockData = mockData;
      this.targetKeys = targetKeys;
    },
    getOrgInfo() {
      this.$get('/power/org-info').then((r) => {
        this.orgInfoData = r.data.data;
      })
    },
    getAppInfo() {
      const targetKeys = [];
      const mockData = [];
      this.$get('/power/app-info').then((r) => {
        r.data.data.forEach(app => {
          const data = {
            key: app.appId.toString(),
            title: app.appName.toString(),
            description: app.appDescription,
            chosen: false,
          };
          if (data.chosen) {
            targetKeys.push(data.key);
          }
          mockData.push(data);
        })
        this.appInfoData = r.data.data;
      })
      this.mockData = mockData;
      this.targetKeys = targetKeys;
    },
    getRoleInfo() {
      const targetKeys = [];
      const mockData = [];
      this.$get('/power/role-info').then((r) => {
        r.data.data.forEach(role => {
          const data = {
            key: role.roleId.toString(),
            title: role.roleName.toString(),
            description: role.roleDescription,
            chosen: false,
          };
          if (data.chosen) {
            targetKeys.push(data.key);
          }
          mockData.push(data);
        })
      })
      this.roleInfoData = mockData;
      this.roleKeys = targetKeys;
    },
    getMenuInfo() {
      this.$get('/power/menu-info').then((r) => {
        this.menuInfoData = r.data.data;
      })
    },
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData;
      this.targetKeys = targetKeys;
    },
    filterOption(inputValue, option) {
      return option.description.indexOf(inputValue) > -1;
    },
    handleChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys;
    },
    handleChanges(targetKeys, direction, moveKeys) {
      this.roleKeys = targetKeys;
    },
    handleSearch(dir, value) {
      console.log('search:', dir, value);
    },
    onSelect(keys) {
      this.menuKeys = keys;
      console.log('Trigger Select', keys);
    },
    onCheck(checkedKeys, e) {
      console.log(JSON.stringify(checkedKeys));
    },
  },
  watch: {
    userAddVisiable () {
      if (this.userAddVisiable) {
        this.$get('role').then((r) => {
          this.roleData = r.data.rows
        })
        this.$get('dept').then((r) => {
          this.deptTreeData = r.data.rows.children
        })
      }
    }
  }
}
</script>
